<template>
  <el-drawer
    v-model="visible"
    title="快速设置"
    size="400px"
    :before-close="handleClose"
  >
    <div class="settings-panel">
      <!-- 主题设置 -->
      <div class="setting-group">
        <h4>主题设置</h4>
        <div class="setting-item">
          <span>主题模式</span>
          <el-radio-group v-model="localSettings.theme.mode" @change="handleThemeChange">
            <el-radio value="light">亮色</el-radio>
            <el-radio value="dark">暗色</el-radio>
            <el-radio value="auto">跟随系统</el-radio>
          </el-radio-group>
        </div>
        <div class="setting-item">
          <span>主色调</span>
          <el-color-picker v-model="localSettings.theme.primaryColor" @change="handleColorChange" />
        </div>
      </div>

      <!-- 界面设置 -->
      <div class="setting-group">
        <h4>界面设置</h4>
        <div class="setting-item">
          <span>侧边栏折叠</span>
          <el-switch v-model="localSettings.interface.sidebarCollapsed" @change="handleSidebarChange" />
        </div>
        <div class="setting-item">
          <span>页面大小</span>
          <el-select v-model="localSettings.interface.pageSize" @change="handlePageSizeChange">
            <el-option label="10条/页" :value="10" />
            <el-option label="20条/页" :value="20" />
            <el-option label="50条/页" :value="50" />
            <el-option label="100条/页" :value="100" />
          </el-select>
        </div>
      </div>

      <!-- 语言设置 -->
      <div class="setting-group">
        <h4>语言设置</h4>
        <div class="setting-item">
          <span>界面语言</span>
          <el-select v-model="localSettings.language.locale" @change="handleLanguageChange">
            <el-option label="中文" value="zh-cn" />
            <el-option label="English" value="en" />
          </el-select>
        </div>
      </div>

      <!-- 通知设置 -->
      <div class="setting-group">
        <h4>通知设置</h4>
        <div class="setting-item">
          <span>启用声音</span>
          <el-switch v-model="localSettings.notification.enableSound" @change="handleNotificationChange" />
        </div>
        <div class="setting-item">
          <span>桌面通知</span>
          <el-switch v-model="localSettings.notification.enableDesktop" @change="handleNotificationChange" />
        </div>
        <div class="setting-item">
          <span>音量大小</span>
          <el-slider
            v-model="localSettings.notification.soundVolume"
            :min="0"
            :max="100"
            @change="handleNotificationChange"
          />
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="settings-actions">
        <el-button @click="resetSettings">重置</el-button>
        <el-button @click="openFullSettings" type="primary">完整设置</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAppStore } from '@/stores/app'
import type { AppSettings } from '@/types/settings'

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const router = useRouter()
const appStore = useAppStore()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 本地设置副本
const localSettings = ref<AppSettings>({ ...appStore.settings })

// 监听设置变化
watch(() => appStore.settings, (newSettings) => {
  localSettings.value = { ...newSettings }
}, { deep: true })

// 主题变化
const handleThemeChange = (mode: string) => {
  appStore.updateSetting('theme.mode', mode)
}

// 颜色变化
const handleColorChange = (color: string) => {
  appStore.updateSetting('theme.primaryColor', color)
}

// 侧边栏变化
const handleSidebarChange = (collapsed: boolean) => {
  appStore.updateSetting('interface.sidebarCollapsed', collapsed)
}

// 页面大小变化
const handlePageSizeChange = (size: number) => {
  appStore.updateSetting('interface.pageSize', size)
}

// 语言变化
const handleLanguageChange = (locale: string) => {
  appStore.updateSetting('language.locale', locale)
}

// 通知变化
const handleNotificationChange = () => {
  appStore.updateSetting('notification', localSettings.value.notification)
}

// 重置设置
const resetSettings = () => {
  // 重置为默认设置
  localSettings.value = {
    theme: {
      mode: 'light',
      primaryColor: '#409EFF',
      borderRadius: 'medium'
    },
    interface: {
      sidebarCollapsed: false,
      sidebarMode: 'vertical',
      headerHeight: 60,
      footerHeight: 40,
      pageSize: 10,
      showBreadcrumb: true,
      showTabs: true,
      showLogo: true
    },
    language: {
      locale: 'zh-cn',
      fallbackLocale: 'en',
      availableLocales: ['zh-cn', 'en']
    },
    notification: {
      enableSound: true,
      enableDesktop: true,
      enableEmail: false,
      enableSms: false,
      soundVolume: 50,
      notificationTypes: {
        system: true,
        security: true,
        business: false,
        marketing: false
      }
    },
    security: {
      sessionTimeout: 30,
      maxLoginAttempts: 5,
      passwordExpiry: 90,
      twoFactorAuth: false,
      ipWhitelist: [],
      loginLogRetention: 365
    },
    performance: {
      enableCache: true,
      cacheExpiry: 3600,
      enableCompression: true,
      enableLazyLoad: true,
      maxConcurrentRequests: 10,
      requestTimeout: 30000
    },
    system: {
      systemName: 'Convallaria',
      systemVersion: '1.0.0',
      systemDescription: '企业级管理平台',
      systemLogo: '/logo.svg',
      systemFavicon: '/favicon.ico',
      copyright: '© 2024 Convallaria. All rights reserved.',
      icp: '',
      enableRegistration: false,
      enableGuestAccess: false,
      maintenanceMode: false
    },
    data: {
      dataRetention: 2555,
      backupFrequency: 'daily',
      backupRetention: 30,
      enableAutoBackup: true,
      backupLocation: '/backups',
      enableDataExport: true,
      enableDataImport: true
    },
    integration: {
      enableApi: true,
      apiRateLimit: 1000,
      enableWebhook: false,
      webhookUrl: '',
      enableSso: false,
      ssoProvider: '',
      enableOauth: false,
      oauthProviders: []
    }
  }
  
  appStore.updateSettings(localSettings.value)
  ElMessage.success('设置已重置')
}

// 打开完整设置页面
const openFullSettings = () => {
  router.push('/system/settings')
  visible.value = false
}

// 关闭抽屉
const handleClose = () => {
  visible.value = false
}
</script>

<style lang="scss" scoped>
.settings-panel {
  padding: 20px 0;
}

.setting-group {
  margin-bottom: 24px;
  
  h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 8px;
  }
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  
  span {
    font-size: 14px;
    color: #606266;
    min-width: 80px;
  }
  
  .el-radio-group,
  .el-select,
  .el-switch,
  .el-color-picker,
  .el-slider {
    flex: 1;
    margin-left: 16px;
  }
}

.settings-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}
</style>
